<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>仓库管理系统</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Bootstrap -->
        <link rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css" />

        <!-- Bootstrap Admin Theme -->
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme-change-size.css" />

        <!-- Vendors -->
        <link rel="stylesheet" media="screen" href="vendors/datatables/css/dataTables.bootstrap.min.css" />
        <!-- (...) -->
        <style type="text/css">
        .bootstrap-admin-panel-content .btn-toolbar {
            margin-bottom: 5px;
        }
        .userdlg {
            overflow: hidden;;
        }
        .userdlg legend {
            padding: 5px;
        }
        .userdlg button {
            width: 75px;
            margin: 0 0 10px 5px;
        }        
		table.dataTable tbody  tr.selected  td {
		    background-color: #B0BED9;
		}		
        </style>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
           <script type="text/javascript" src="js/html5shiv.js"></script>
           <script type="text/javascript" src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="bootstrap-admin-with-small-navbar">        
        <th:block th:include="template :: header"/>
        
        <div class="container">
            <!-- left, vertical navbar & content -->
            <div class="row">
                <!-- left, vertical navbar -->
                <div class="col-md-2 bootstrap-admin-col-left" th:include="template :: leftnav (current=users)">
                </div>

                <!-- content -->
                <div class="col-md-10">
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">                        
                                <div class="panel-heading">
                                    <div class="text-muted bootstrap-admin-box-title">用户列表</div>
                                </div>
                                <div class="bootstrap-admin-panel-content">
                                    <div class="btn-toolbar">
                                    <button id="btnAdd" class="btn btn-default" type="button">添加新用户</button>
                                    <button id="btnEdit" class="btn btn-default" type="button">修改用户</button>
                                    <button id="btnDel" class="btn btn-default" type="button">删除用户</button>
                                    <button id="btnPwd" class="btn btn-default" type="button">重置密码</button>
                                    </div>
                                    <table class="table table-striped table-bordered" id="users">
                                        <thead>
                                            <tr>
                                                <th>Id</th>
                                                <th>账号</th>
                                                <th>姓名</th>
                                                <th class="text-center">状态</th>
                                                <th class="text-center">注册日期</th>
                                                <th class="text-center">修改日期</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- footer -->
        <div th:include="template :: footer"></div>
        
        <!-- 新建用户 -->
        <div id="creatediv" class="userdlg"  style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>新建用户</legend>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="add_account">账号</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_account" name="account" type="text"  placeholder="账号"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="add_name">姓名</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_name" name="name" type="text"  placeholder="姓名"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="add_password">密码</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="add_password" name="password" type="text"  value="8888" placeholder="密码"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="add_status">状态</label>
                      <div class="col-sm-6">
                        <select class="form-control" id="add_status" name="status">
                            <option value="0">未激活</option>
                            <option value="1" selected="selected">正常</option>
                        </select>
                      </div>
                  </div>
                  <button type="button" class="btn btn-primary">确定</button>
                  <button type="reset" class="btn btn-default">取消</button>
              </fieldset>
          </form>        
        </div>

        <!-- 修改用户 -->
        <div id="editdiv"  class="userdlg" style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>修改用户</legend>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" >账号</label>
                      <div class="col-sm-6">
                            <p id="edit_account" class="form-control-static"></p>                      
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="edit_name">姓名</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="edit_name" name="name" type="text"  placeholder="姓名"/>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="edit_status">状态</label>
                      <div class="col-sm-6">
                        <select class="form-control" id="edit_status" name="status">
                            <option value="0">未激活</option>
                            <option value="1">正常</option>
                            <option value="2">账号已过期</option>
                            <option value="3">密码已过期</option>
                            <option value="4">账号被锁定</option>
                        </select>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="edit_admin">管理员</label>
                      <div class="col-sm-6">
                        <select class="form-control" id="edit_admin" name="admin">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                      </div>
                  </div>
                  <button type="button" class="btn btn-primary">确定</button>
                  <button type="reset" class="btn btn-default">取消</button>
              </fieldset>
          </form>        
        </div>
        
        <!-- 重置口令 -->
        <div id="resetdiv"  class="userdlg" style="display: none;">
            <form class="form-horizontal" >
              <fieldset>
                  <legend>重置用户口令</legend>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" >账号</label>
                      <div class="col-sm-6">
                            <p id="reset_account" class="form-control-static"></p>                      
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" >姓名</label>
                      <div class="col-sm-6">
                            <p id="reset_name" class="form-control-static"></p>          
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-sm-2 control-label" for="reset_password">密码</label>
                      <div class="col-sm-6">
                          <input class="form-control" id="reset_password" name="password" type="text"  placeholder="密码"/>
                      </div>
                  </div>
                  <button type="button" class="btn btn-primary">确定</button>
                  <button type="reset" class="btn btn-default">取消</button>
              </fieldset>
          </form>        
        </div>      
        
<!--         <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> -->
        <script type="text/javascript" src="vendors/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="vendors/jquery-ajax-mvc-patch.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/twitter-bootstrap-hover-dropdown.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="vendors/datatables/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="vendors/jquery-dateFormat.min.js"></script>
        <script type="text/javascript" src="vendors/layer/layer.js"></script>
        <script type="text/javascript" src="vendors/jquery.validate.js"></script>
        <script type="text/javascript" src="js/app/tools.js"></script>
        <script type="text/javascript" src="js/app/users.js"></script>
    </body>
</html>
